import { Component } from "react";
import './pl.css'
class Liu extends Component {
  state = {
    title:'',
    lun:'',
    list:[
      {
        title:'刘梦白',
        lun:'我爱吃粑粑！！！'
      }
    ] 
  }
  updateTitle = (e) =>{
    this.setState({
      title:e.target.value
    })
  }
  updateContent = (e) =>{
    this.setState({
      lun:e.target.value
    })
  }
  fa = () =>{
    // console.log('state',this.state);
    const {title,lun} = this.state
    let arr = this.state.list.concat([{title,lun}])
    this.setState({
      list:arr
    })
  }
  del= (index) =>{
    this.state.list.splice(index,1)
    this.setState({
      list:this.state.list
    })
  }
  render() { 
    return ( 
      <div>
        <div className="yi">
          <div className="yi-y">
            <div className="yi-r">
              <input value={this.state.title} type="text" placeholder="请输入评论人" onChange={this.updateTitle}/>
            </div>
            <div className="yi-s">
              <textarea value={this.state.lun}  placeholder="请输入评论内容" onChange={this.updateContent}></textarea>
            </div>
            <div className="yi-si">
              <button className="yi-w" onClick={this.fa}>发表评论</button>
            </div>
            <div>
              <ul>
               {
                 this.state.list.map((item,index)=><li key={index}>
                   <h1>评论人：{item.title}</h1>
                   <p2>评论内容：{item.lun}</p2>
                   <button onClick={()=>this.del(index)}>❌</button>
                 </li>)
               }
              </ul>
            </div>
          </div>
        </div>
      </div>
     );
  }
}
 
export default Liu;